<template>
  <Loading v-show="isLoading" />

  <Form
    class="w-1/3 mx-auto mt-40 shadow-2xl shadow-blue-300 rounded-box"
    v-show="!isLoading"
    @submit="onSubmit"
    :validation-schema="validationSchema"
  >
    <div class="w-3/4 mx-auto pt-4">
      <label class="input input-bordered flex items-center gap-2 my-4">
        Email
        <Field name="email" type="text" class="grow" v-model="email" />
        <ErrorMessage name="email" class="text-red-400" />
      </label>

      <label class="input input-bordered flex items-center gap-2 my-4">
        Name
        <Field name="name" type="text" class="grow" v-model="name" />
        <ErrorMessage name="name" class="text-red-400" />
      </label>

      <select class="select select-bordered w-full mb-4" v-model="classInfo">
        <option disabled>Choose Class</option>
        <option
          v-for="classItem in classInChargeArr"
          :key="classItem"
          :value="classItem"
        >
          Class {{ classItem.split('|')[0] }} | Year
          {{ classItem.split('|')[1] }}
        </option>
      </select>

      <select class="select select-bordered w-full mb-4" v-model="gender">
        <option disabled>Choose Gender</option>
        <option>male</option>
        <option>female</option>
      </select>
    </div>

    <div class="text-center">
      <button class="btn btn-primary my-2">Create Student</button>
    </div>
  </Form>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useToast } from 'vue-toastification';
import { Form, Field, ErrorMessage } from 'vee-validate';
import * as yup from 'yup';

import { signup } from '@/services/apiAuth';
import { createStudent } from '@/services/apiStudent';
import { getTeacherByTeacherId } from '@/services/apiTeacher';
import { getConfig } from '@/utils/configHelper';

import Loading from '@/ui/Loading.vue';

const router = useRouter();

const email = ref('someone@example.com');
const name = ref('Someone');
const classInfo = ref('X|X');

const teacherId = ref('');

const classInChargeArr = ref([]);

const gender = ref('male');

const toast = useToast();

const validationSchema = yup.object({
  email: yup.string().required().email(),
  name: yup.string().required(),
});
async function onSubmit() {
  toast.info('Creating...');

  // Signup
  const userData = await signup(email.value, '123456', { isStudent: true });
  const studentId = userData.user.id;

  // Insert a student
  const students = await createStudent({
    name: name.value,
    class: classInfo.value.split('|')[0],
    grade: classInfo.value.split('|')[1],
    teacher_id: teacherId.value,
    gender: gender.value,
    avatar:
      'https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp',
    student_id: studentId,
  });

  console.log(students);

  toast.clear();
  toast.success('Successfully created');
  router.push({ name: 'student' });
}

const isLoading = ref(true);
onMounted(async () => {
  isLoading.value = true;

  const token = getConfig('SUPABASE_TOKEN');
  const userToken = JSON.parse(localStorage.getItem(token));

  teacherId.value = userToken.user.id;

  const teachers = await getTeacherByTeacherId(teacherId.value);
  classInChargeArr.value = JSON.parse(teachers[0].class_in_charge);
  classInfo.value = classInChargeArr.value[0];

  isLoading.value = false;
});
</script>
